<template>
  <div id="mainbox">
    <div class="cenbox">
      <h2 class="top_head"><span></span>会话</h2>
      <div class="xiaoxi">
        <div class="left">
          <div class="top">
            <tiny-input clearable  v-model="snameval" placeholder="请输入查找用户" @change="(val)=>{store.getAllUser(val)}"></tiny-input>
          </div>
          <div class="finduser" v-show="alluser.length>0">
            <div class="box" v-for="item in alluser" :key="item._id">
                <img src="/Logo.png" alt="">
                <p>{{ item.username }}</p>
                <button @click="()=>{store.sendFriendRequest(item._id)}">添加用户</button>
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { TinyInput } from "@opentiny/vue";
import { storeToRefs } from "pinia";
import { useUserStore } from "@/store/messagePinia";
let store = useUserStore();
let { alluser } = storeToRefs(store);
console.log(alluser.value)

const snameval = ref('')
</script>
<style scoped lang="scss">
#mainbox {
  width: 100%;
  height: calc(100vh - 76px);
  overflow: scroll;
  .cenbox {
    width: 100%;
    height: 94%;
    border-radius: 16px;
    background-color: white;
    margin-top: 2%;
    overflow: hidden;
    .top_head {
      font-size: 20px;
      margin: 15px;
      border-bottom: 1.5px solid #e5e5e5;
      padding-bottom: 16px;
      span {
        border: 3.5px solid #3dd4a7;
        display: inline-block;
        height: 23px;
        border-radius: 3px;
        margin-right: 10px;
        position: relative;
        top: 4px;
      }
    }
    .xiaoxi {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 88%;
      .left {
        width: 22%;
        height: 100%;
        background-color: pink;
        .top {
          width: 100%;
          height: 46px;
          padding-top: 7px;
        }
        .finduser{
            width: 100%;
            height: 93%;
            overflow: scroll;
            .box{
                width: 100%;
                height: 50px;
                border-bottom: 1px solid black;
                display: flex;
                background-color: #59a890;
                justify-content: space-between;
                align-items: center;
                img{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
        }
        .finduser::-webkit-scrollbar{
            width: 0px;
            height: 0px;
        }
      }
      .right {
        width: 78%;
        height: 100%;
        background-color: #3dd4a7;
      }
    }
  }
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
